{% extends "openvolunteer/base.html" %}

{% block title %}OpenVolunteer | Fiche détaillée d'un événement{% endblock %}

{% block content %}
    <div class="event">
        <div class="photo">
            {%  if event.affiche %}
                <img src="{{ event.get_affiche_url }}" alt="Affiche de l'événement">
            {% endif %}
        </div>
        <div class="details">
            <table>
                <tr>
                    <th>Dénomination</th>
                    <td>{{ event.title }}</td>
                </tr>
                <tr>
                    <th>Date</th>
                    <td>{{ event.date|date:"l d F Y" }}</td>
                </tr>
                <tr>
                    <th>Lieu</th>
                    <td>{{ event.place }}</td>
                </tr>
            </table>
        </div>
        <div class="dlbutton center">
            <input type="button"
                   onclick="window.location.href='{{ settings.OPENVOLUNTEER_WEB_ROOT }}/event/csv/{{ event.id }}'"
                   title="Télécharger la liste des bénévoles présents à cet événement en .CSV"
                   value="Télécharger la liste des bénévoles présents à cet événement en .CSV">
        </div>
    </div>
    {% if needs %}
        <div class="search-results center needs">
            <h2 style="clear:both;">Récapitulatif des besoins</h2>
            <table>
                <tr>
                    <th>Poste</th>
                    <th>Nombre de bénévoles</th>
                    <th>Besoin</th>
                    <th>Poste rempli ?</th>
                </tr>
                {% for need in needs %}
                    <tr>
                        <td><a href="{{ need.job.get_absolute_url }}" title="Accéder à la fiche du poste {{ need.job }}">{{ need.job }}</a></td>
                        <td>{{ need.get_completed_nb }}</td>
                        <td>{{ need.number }}</td>
                        <td>
                            {% if need.get_completed_status  %}
                                <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/yes.png" alt="oui" class="icon">
                            {% else %}
                                <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/no.png" alt="non" class="icon">
                            {% endif %}
                        </td>
                        <td class="more">
                            <div id="dialog_conf_delete2{{ need.id }}" title="Supprimer cette fiche?" style="text-align:center;">
                                <p>Êtes vous sûr de vouloir supprimer ce besoin?</p>
                                <p><a href="{{ need.get_delete_url }}" title="Confirmer l'opération">Confirmer</a></p>
                            </div>
                            <script>
                                $(function() {
                                    $("#dialog_conf_delete2{{ need.id }}").dialog({
                                        bgiframe: true,
                                        modal: true,
                                        autoOpen: false
                                    });
                                });
                            </script>
                            <a href="{{ need.get_edit_url }}" title="Modifier les valeurs de ce besoin">
                                Modifier
                            </a> |
                            <a href="javascript:;" onclick="$('#dialog_conf_delete2{{ need.id }}').dialog('open');"
                               title="Supprimer ce besoin">
                                Supprimer
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
    {% if comments %}
        <h3 style="margin-left:60px;">Liste des commentaires</h3>
        <div class="comment"><a name="comments"></a>
       {% for comment in comments %}
            <div id="comment_dialog_delete_{{ comment.id }}" title="Supprimer ce commentaire?" style="text-align:center;">
                <p>Êtes vous sûr de vouloir supprimer ce commentaire?</p>
                <p><a href="{{ comment.get_delete_url }}" title="Confirmer l'opération">Confirmer</a></p>
            </div>
            <script>
                $(function() {
                    $("#comment_dialog_delete_{{ comment.id }}").dialog({
                        bgiframe: true,
                        modal: true,
                        autoOpen: false
                    });
                });
            </script>

            <div class="comment"><a name="c{{ comment.id }}"></a>
                <h4>
                    {% if comment.email %}
                        <a href="mailto:{{ comment.email }}" title="Envoyer un email à {{ comment.name }}">{{ comment.name }}</a>
                    {% else %}
                        {{ comment.name }}
                    {% endif %}
                    le {{ comment.pub_date|date:"l d F Y à H:i" }}
                    <small>(<a href="javascript:;" onclick="$('#comment_dialog_delete_{{ comment.id }}').dialog('open');" 
                        title="Supprimer ce commentaire ?">X</a>)</small>
                </h4>
                <div>{{ comment.comment }}</div>
            </div>
        {% endfor %}
        </div>
    {% endif %}
    <h3 style="margin-left:60px;">Ajouter un commentaire</h3>
    <form method="post" action="{{ event.get_comment_add_url }}" class="comment-form center">
        <table class="centered">
            <tr>
                <th>Nom et prénom (ou pseudo)</th>
                <td class="required"><input type="text" name="name" value="{{ user.username }}"></td>
            </tr>
            <tr>
                <th>Email</th>
                <td><input type="text" name="email" value="{{ user.email }}"></td>
            </tr>
            <tr>
                <th>Commentaire</th>
                <td class="required"><textarea name="comment"></textarea></td>
            </tr>
        </table>
        <p class="required">* Les champs marqués en <span>rouge</span> sont obligatoires.</p>
        <input type="submit" value="Enregistrer">
    </form>
{% endblock %}

{% block navigation %}
    <div id="dialog_conf_delete" title="Supprimer cette fiche?" style="text-align:center;">
        <p>Êtes vous sûr de vouloir supprimer cette fiche événement?</p>
        <p><a href="{{ event.get_delete_url }}" title="Confirmer l'opération">Confirmer</a></p>
    </div>
    <script>
        $(function() {
            $("#dialog_conf_delete").dialog({
                bgiframe: true,
                modal: true,
                autoOpen: false
            });
        });
    </script>
    <ul>
        <li>
            <a href="{{ event.get_edit_url }}"
               title="Modifier les informations de cette fiche">
               Modifier cette fiche
            </a>
        </li>
        <li>
            <a href="javascript:;" onclick="$('#dialog_conf_delete').dialog('open');"
               title="Supprimer l'événement">
               Supprimer cette fiche
            </a>
        </li>
        <li>
            <a href="{{ event.get_need_add_url }}"
               title="Ajouter un besoin">
               Ajouter un besoin
            </a>
        </li>
        <li>
            <a href="{{ event.get_answer_add_url }}"
               title="Ajouter une réponse">
               Ajouter une réponse
            </a>
        </li>
        <li>
            <a href="{{ event.get_positives_answer_url }}"
               title="Obtenir la liste des bénévoles présents à cet événement">
               Obtenir la liste des bénévoles présents
            </a>
        </li>
        <li>
            <a href="{{ event.get_answer_url }}"
               title="Obtenir la liste des réponses pour cet événement">
               Obtenir la liste des réponses
            </a>
        </li>
        <li>
            <a href="{{ event.get_unknown_answer_url }}"
               title="Obtenir la liste des bénévoles non contactés pour cet événement">
               Obtenir la liste des bénévoles non contactés
            </a>
        </li>
    </ul>
{% endblock %}
